// 高风险地区火险等级走势图
(function() {
  // 基于准备好的dom，初始化echarts实例
  let myChart = echarts.init(document.querySelector(".line .chart"));
  let myDate = new Date();
  let hour = myDate.getHours();
  let Data =
      [
      [24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120,60,56,99,155,23,170,62,94,24,99,34,28,45],
      [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79,88,153,20,80,61,90,24,75,300,60,88,10],
      [60, 24, 501, 304, 230, 30, 60, 73, 50, 100, 200, 59,68,53,220,380,161,50,44,30,150,230,28,100],
    ];//接收服务器的高风险地区的各个时间段的火险等级指数
  let chartTime = ["0:00", "1:00", "2:00", "3:00", "4:00", "5:00", "6:00", "7:00", "8:00", "9:00", "10:00", "11:00", "12:00", "13:00", "14:00", "15:00", "16:00", "17:00", "18:00", "19:00", "20:00", "21:00", "22:00", "23:00",]
  let data = [[],[],[]];
  let charttime = [];

  if(hour<=12){
    for(let i=0;i<=hour;i++){
      for(let e=0;e<3;e++){
        data[e][i] = Data[e][i];
        charttime[i] = chartTime[i];
      }
    }
  }else{ //hour>12
    for(let a=0;a<=12;a++){
      for(let e=0;e<3;e++){
        data[e][12-a] = Data[e][hour-a];
        charttime[12-a] = chartTime[hour-a];
      }
    }
  }


  // 2. 指定配置和数据
  var option = {
    color: ["#00f2f1", "#ed3f35","#fff"],
    tooltip: {
      // 通过坐标轴来触发
      trigger: "axis"
    },
    legend: {
      // 距离容器10%
      right: "10%",
      // 修饰图例文字的颜色
      textStyle: {
        color: "#4c9bfd"
      }
      // 如果series 里面设置了name，此时图例组件的data可以省略
      // data: ["邮件营销", "联盟广告"]
    },
    grid: {
      top: "20%",
      left: "3%",
      right: "4%",
      bottom: "3%",
      show: true,
      borderColor: "#012f4a",
      containLabel: true
    },

    xAxis: {
      type: "category",
      boundaryGap: false,
      data: charttime,
      // 去除刻度
      axisTick: {
        show: false
      },
      // 修饰刻度标签的颜色
      axisLabel: {
        color: "rgba(255,255,255,.7)"
      },
      // 去除x坐标轴的颜色
      axisLine: {
        show: false
      }
    },
    yAxis: {
      type: "value",
      // 去除刻度
      axisTick: {
        show: false
      },
      // 修饰刻度标签的颜色
      axisLabel: {
        color: "rgba(255,255,255,.7)"
      },
      // 修改y轴分割线的颜色
      splitLine: {
        lineStyle: {
          color: "#012f4a"
        }
      }
    },
    series: [
      {
        name: "昆明",
        type: "line",
        stack: "总量",
        // 是否让线条圆滑显示
        smooth: true,
        data: data[0]
      },
      {
        name: "丽江",
        type: "line",
        stack: "总量",
        smooth: true,
        data: data[1]
      },
      {
        name: "大理",
        type: "line",
        stack: "总量",
        smooth: true,
        data: data[2]
      }
    ]
  };
  // 3. 把配置和数据给实例对象
  myChart.setOption(option);

  // 重新把配置好的新数据给实例对象
  myChart.setOption(option);
  window.addEventListener("resize", function() {
    myChart.resize();
  });
})();



